<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '收藏',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <div class="collet">
    <template v-if="appStore.isLogged">
      <wd-sticky>
        <Calendar
          @confirm="handleConfirm"
          :dDate="{
            startDate: hotelSearch.searchInfo.startDate,
            endDate: hotelSearch.searchInfo.endDate,
          }"
        >
          <div class="date active" @click="dateDialogChange(true)">
            <div class="item">
              {{ showDate.startDateShort }}
              <div class="state">入住</div>
            </div>
            <div class="item middle">共{{ showDate.roomNight }}晚</div>
            <div class="item">
              {{ showDate.endDateShort }}
              <div class="state">
                <span>离开</span>
                <span class="i-carbon-chevron-right"></span>
              </div>
            </div>
          </div>
        </Calendar>
      </wd-sticky>

      <LoadPage ref="loadPage" url="/hotels-layout-app/collection-page">
        <template #default="{ list }">
          <div class="hotel-list" v-if="list.length > 0">
            <HotelItem v-for="(item, index) in list" :key="index" :hotel="item" />
          </div>
        </template>
        <template #empty>
          <Seat class="no-collect" type="no-collect" />
        </template>
      </LoadPage>
    </template>
    <!-- 占位，未登录 -->
    <Seat v-else type="no-login" />

    <TabBar v-if="!dateDialogStatus" :scrollTop="scrollTop" />
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { useHotelSearch } from '@/store/hotelSearch'
import { useUserStore } from '@/store/index'
import HotelItem from './components/HotelItem.vue'

const hotelSearch = useHotelSearch()

const appStore = useUserStore()

const showDate = reactive({
  startDate: '',
  endDate: '',
  roomNight: '',
  startDateShort: '',
  endDateShort: '',
})
// 日期确认
function handleConfirm(dateInfo) {
  showDate.startDate = dateInfo.startDate
  showDate.endDate = dateInfo.endDate
  showDate.roomNight = dateInfo.roomNight
  showDate.startDateShort = dayjs(dateInfo.startDate).format('MM月DD日')
  showDate.endDateShort = dayjs(dateInfo.endDate).format('MM月DD日')
  dateDialogChange(false)

  hotelSearch.setSearchInfo({
    startDate: dateInfo.startDate,
    endDate: dateInfo.endDate,
  })
  getData(true)
}

// 日期选择组件显示时，需要将层级提高，否则会遮不住底部tabbar
const dateDialogStatus = ref(false)
function dateDialogChange(e) {
  dateDialogStatus.value = e
}

// 上拉加载
const loadPage = ref()
onReachBottom(() => {
  getData()
})
// 下拉刷新
onPullDownRefresh(() => {
  if (appStore.isLogged) {
    getData(true)
  } else {
    uni.stopPullDownRefresh()
  }
})

function getData(isRefresh = false) {
  if (loadPage.value) {
    loadPage.value.getData(
      {
        enterDate: hotelSearch.searchInfo.startDate,
        leaveDate: hotelSearch.searchInfo.endDate,
      },
      isRefresh,
    )
  } else {
    setTimeout(() => {
      getData(isRefresh)
    }, 300)
  }
}

const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
onHide(() => {
  scrollTop.value = 0
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0,
  })
})
</script>

<style scoped lang="scss">
.collet {
  box-sizing: border-box;
  min-height: 100vh;
  background-color: var(--bgc4);
  .date {
    position: sticky;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100vw;
    height: 112rpx;
    padding: 0 30rpx;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid #e6ecf0;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: 700;
      color: var(--color1);
      .state {
        display: inline-flex;
        align-items: center;
        margin-left: 6rpx;
        font-size: 25rpx;
        font-weight: 500;
        color: var(--color4);
        span {
          line-height: 1;
        }
      }
    }
    .middle {
      flex: 1;
      font-size: 27rpx;
      font-weight: 500;
      text-align: center;
    }
  }

  .hotel-list {
    padding: 28rpx 30rpx 0;
  }

  :deep(.no-collect) {
    height: calc(100vh - 112rpx) !important;
  }
  :deep(.load-more) {
    padding-bottom: 180px;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 180rpx) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 180rpx) !important;
  }
}
</style>
